<meta charset='utf-8' />

<body style='padding:10px;color:#838'>
	
	<h2 style='text-align:center' class='title'>中药查询</h2>

	性：
	<select id="s_xing" style='margin-right:20px;color:#838'>
		<option value="">全部</option>
		<option value="温">温</option>
		<option value="热">热</option>
		<option value="寒">寒</option>
		<option value="凉">凉</option>
	</select>
	味：
	<select id="s_wei" style='margin-right:20px;color:#838'>
		<option value="">全部</option>
		<option value="酸">酸</option>
		<option value="苦">苦</option>
		<option value="甘">甘</option>
		<option value="辛">辛</option>
		<option value="咸">咸</option>
	</select>
	归经：
	<select id="s_jing" style='margin-right:20px;color:#838'>
		<option value="">全部</option>
		<option value="肝">肝</option>
		<option value="心">心</option>
		<option value="脾">脾</option>
		<option value="肺">肺</option>
		<option value="肾">肾</option>
		<option value="心包">心包</option>
		<option value="胆">胆</option>
		<option value="胃">胃</option>
		<option value="小肠">小肠</option>
		<option value="大肠">大肠</option>
		<option value="膀胱">膀胱</option>
		<option value="三焦">三焦</option>
	</select>

	<span style='margin-right:30px'>
		<input type="text" id='s_gong' style='width:100px;margin-right:10px' placeholder='功能关键词'>
		<input type="text" id='s_name' style='width:100px;margin-right:10px' placeholder='药名关键词'>
		<img src="./public/search.png" id='searchBtn' style='cursor:pointer'>
	</span>

	<span style='margin-left:50px;cursor:pointer' id='addBtn' class='userConArea'>添加</span>


	<!--中药列表-->
	<div id='list' style='width:100%'>
		<!--div style='word-break:break-all;margin-top:10px'>
			<div><span>药名</span>：<span>xxx</span></div>
			<div>性味：xxx</div>
			<div>归经：xxx</div>
			<div style='display:flex;width:95%'>
				<div style=''>功能：</div>
				<div style='flex:1'>aaaaaaaa</div>
			</div>
		</div-->
	</div>

	<div id='fpage' style='margin:30px 0'></div>


	<!--添加或编辑元素-->
	<div style='position:fixed;top:200px;left:0;width:100%;display:none' id='add_area'>
		<div style='width:450px;margin:0 auto;background:#ccc;padding:20px 0'>
			<h2 style='text-align:center' id='add_title'>编辑中药</h2>
			<div style='display:flex;margin-bottom:20px'>
				<div style='width:100px;text-align:right'>药名：</div>
				<div style='flex:1'><input id='add_name' type="text" style='width:300px'></div>
			</div>
			<div style='display:flex;margin-bottom:20px'>
				<div style='width:100px;text-align:right'>性味：</div>
				<div style='flex:1'><input id='add_xing' type="text" style='width:300px'></div>
			</div>
			<div style='display:flex;margin-bottom:20px'>
				<div style='width:100px;text-align:right'>归经：</div>
				<div style='flex:1'><input id='add_jing' type="text" style='width:300px'></div>
			</div>
			<div style='display:flex;margin-bottom:20px'>
				<div style='width:100px;text-align:right'>功能：</div>
				<div style='flex:1'><textarea id="add_gong" cols="33" rows="5"></textarea></div>
			</div>
			<div style='text-align:center'>
				<button id='add_sub'>提交</button>
				<button id='add_back'>返回</button>
			</div>
		</div>
	</div>

</body>

<script>
var pNow = 1;	//初始当前页
var pMax = 2;	//初始最大页
var list;		//当前页中药列表容器

_init();


$('#searchBtn').click(function(){
	pNow = 1;
	pMax = 2;
	_init();
});





function _init(){
	Notice('加载中......');
	_getYouList(function(res){
		Notice();
		var tmp = _parseRes(res);
		list = tmp;
		if(tmp.length < 1){
			pMax = pNow;
			Fpage(pMax,pMax,function(p){
				pNow = p;
				pMax = p+1;
				_init();
			},1,1,'#fpage')
			$('#list').html('');
			return;
		}else{
			Fpage(pNow,pMax,function(p){
				pNow = p;
				pMax = p+1;
				_init();
			},1,1,'#fpage')
		}

		var str = '';
		for(var i=0;i<tmp.length;i++){
			str += "<div style='word-break:break-all;margin-top:20px;border-bottom:1px solid #ccc;padding-bottom:10px;font-size:13px'>";
				var c = " style='color:red'";

				var yao_name = $('#s_name').val().trim().split(' ');	//如果有关键字
				str += "<div><h3 style='color:red'>药名："+_keyBold(tmp[i].name,yao_name)+"<span class='userConArea' style='cursor:pointer;color:blue;font-size:13px;margin-left:50px' onclick=_editYao("+i+")>编辑</span><span style='cursor:pointer;color:blue;font-size:13px;margin-left:50px' onclick=_deleltYao("+i+") class='userConArea'>删除</span></h3></div>";
		
				var yao_xing = $('#s_xing').find('option:selected').val();
				var yao_wei = $('#s_wei').find('option:selected').val();
				str += "<div>性味："+_keyBold(tmp[i].xing,[yao_xing,yao_wei])+"</div>";

				var yao_jing = $('#s_jing').find('option:selected').val();
				str += "<div>归经："+_keyBold(tmp[i].jing,yao_jing)+"</div>";

				str += "<div style='display:flex'>";
					str += "<div>功能：</div>";
					var yao_gong = $('#s_gong').val().trim().split(' ');
					str += "<div style='flex:1'>"+_keyBold(tmp[i].gong,yao_gong)+"</div>";
				str += "</div>";
			str += "</div>";
		}
		$('#list').html(str);
	});
	_checkUser();	//显示登陆用户及退出
}

//添加中药
$('#addBtn').click(function(){
	$('#add_area').show();
	$('#add_name').val('').attr("disabled",false);
	$('#add_xing').val('');
	$('#add_jing').val('');
	$('#add_gong').val('');
});

//删除中药
function _deleltYao(index){
	if(!_confirm()){
		return;
	}
	var name = list[index].name.trim();
	var data = {
		type:'deleteYao',
		name:name
	}
	Notice('请求提交中......');
	After(data,function(res){
		Notice('');
		var tmp = _checkJsonFormat(res);
		if(tmp.stat == 'ok'){
			A('操作成功！');
			_init();
			$('#add_area').hide();
		}else{
			A('操作异常！');
		}
	});
}

//编辑中药
function _editYao(index){
	$('#add_area').show();
	$('#add_name').val(list[index].name).attr("disabled",true);
	$('#add_xing').val(list[index].xing);
	$('#add_jing').val(list[index].jing);
	$('#add_gong').val(list[index].gong);

}

//提交编辑
$('#add_sub').click(function(){
	var name = $('#add_name').val().trim();
	var xing = $('#add_xing').val().trim();
	var jing = $('#add_jing').val().trim();
	var gong = $('#add_gong').val().trim();
	if(!name || !gong){
		A('至少需要药名和功能');
		return;
	}
	var data = {
		type:'editYao',
		name:name,
		xing:xing,
		jing:jing,
		gong:gong
	}
	Notice('请求提交中......');
	After(data,function(res){
		Notice('');
		var tmp = _checkJsonFormat(res);
		if(tmp.stat == 'ok'){
			A('操作成功！');
			_init();
			$('#add_area').hide();
		}else{
			A('操作异常！');
		}
	});
})


$('#add_back').click(function(){
	$('#add_area').hide();
})






//获取中药列表
function _getYouList(fun){
	var data = {
		type:'_getYaoList',
		xing:$('#s_xing').find('option:selected').val(),
		wei:$('#s_wei').find('option:selected').val(),
		jing:$('#s_jing').find('option:selected').val(),
		gong:$('#s_gong').val().trim(),
		name:$('#s_name').val().trim(),
		pNow:pNow
	}
	data.cacheName = md5(JSON.stringify(data));
	var path = './cache/'+data.cacheName;
	//请求缓存
	// Ajax({},function(res){		
	// 	if(/^\[.*\]$/.test(res)){
	// 		C('yao from cache');
	// 		fun(res)
	// 	}else{
	// 		//请求后台
	// 	}
	// },path);
			C('yao from after');
			Ajax2(data,function(res){
				fun(res);
			});

}






//连击跳转到登陆页面
var clickCount = 0;
var currentTime = 0;
$('.title').click(function(){
	C(sessionStorage.user);
	if(sessionStorage.user){
		return;
	}
	if(clickCount == 1){
		currentTime = new Date().getTime();
	}
	if(clickCount > 5){
		if(currentTime + 2000 > new Date().getTime()){
			location.replace('login.html');
		}else{
			clickCount = 0;
			currentTime = 0;
		}
	}
	clickCount +=1;
});

</script>